<template>
  <el-dialog v-model="isShow" align-center draggable title="创建" width="60%">
    <!--    <FormCreate :option="options" :rule="formRules" @submit="submitData" v-model:api="fApi"></FormCreate>-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="字典key:">
        <el-input v-model="formData.dic_key"></el-input>
      </el-form-item>

      <el-form-item label="描述:">
        <el-input v-model="formData.description"></el-input>
      </el-form-item>

      <el-form-item label="option值类型:">
        <el-radio-group v-model="formData.value_data_type" @change="handleClick">
          <el-radio :label="DicDataTypeString">字符串</el-radio>
          <el-radio :label="DicDataTypeNumber">整型</el-radio>
        </el-radio-group>
      </el-form-item>
      <hr />
      <el-form-item label="字典类型:">
        <el-radio-group v-model="formData.dic_value_type" @change="handleClick">
          <el-radio :label="DicValueTypeString">单字符串</el-radio>
          <el-radio :label="DicValueTypeOptions">自定义option</el-radio>
          <!--          <el-radio :label="DicValueTypeEntity">实体一对多</el-radio>-->
          <el-radio :label="DicValueTypeSqlSelect">SQL查询</el-radio>
          <el-radio :label="DicValueTypeSqlSearch">SQL查询-远程搜索</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="border p-4">
      <!--      自定义枚举列表-->
      <FormKV v-if="formData.dic_value_type == DicValueTypeOptions" ref="refFormKV"></FormKV>

      <!--      字符串-->
      <div v-if="formData.dic_value_type == DicValueTypeString">
        <el-form-item label="字典value值:">
          <el-input v-model="formData.dic_value"></el-input>
        </el-form-item>
      </div>
      <div v-if="formData.dic_value_type == DicValueTypeEntity">
        <div class="flex">
          <el-form-item class="1/4 mx-1" label="父表名:">
            <el-input v-model="formEntity.father_table_name" placeholder="如:roles"></el-input>
          </el-form-item>

          <el-form-item class="1/4 mx-1" label="子表名:">
            <el-input v-model="formEntity.son_table_name"></el-input>
          </el-form-item>
          <el-form-item class="1/4 mx-1" label="子表关联字段:">
            <el-input v-model="formEntity.son_relation_field"></el-input>
          </el-form-item>
        </div>
      </div>
      <!--      sql查询 一次性-->
      <div v-if="formData.dic_value_type == DicValueTypeSqlSelect">
        <el-form-item class="1/4 mx-1" label="sql查询语句:">
          <el-input v-model="formData.dic_value" rows="4" type="textarea"></el-input>
        </el-form-item>
        <!--        写法提示-->
        <div class="m-2 text-2xl">
          <div>
            <el-alert type="success">sql查询示例如下： select id as value,username as label from sys_users where 1</el-alert>
          </div>
          <div class="mt-2">
            <el-alert type="warning"
              >注意：需要先指定value所对应字段，再指定label对应字段，如下顺序反了可能会有异常： select username as label，id as
              value
            </el-alert>
          </div>
        </div>
      </div>

      <!--      sql-远程搜索-->
      <div v-if="formData.dic_value_type == DicValueTypeSqlSearch">
        <el-form-item class="1/4 mx-1" label="sql远程搜索-查询语句:">
          <el-input v-model="formData.dic_value" rows="4" type="textarea"></el-input>
        </el-form-item>
        <!--        写法提示-->
        <div class="m-2 text-2xl">
          <div>
            <el-alert type="success"
              >该项主要用于select远程搜索，一般配合selet组件远程搜索，使用 <b>{search_text}</b>进行占位，表示远程搜索的内容<br />
              sql查询示例如下： select id as value,username as label from sys_users where username LIKE '%{search_text}%' LIMIT 20
            </el-alert>
          </div>
          <div class="mt-2">
            <el-alert type="warning"
              >注意：需要先指定value所对应字段，再指定label对应字段，如下顺序反了可能会有异常： select username as label，id as
              value
              <p>已经封装好组件:"FormSeleteSearch"，可直接在前端进行调用，或参考该组件自行封装</p>
            </el-alert>
          </div>
        </div>
      </div>
    </div>

    <div class="flex justify-end mt-2">
      <el-button type="primary" @click="submitData">提交</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, nextTick, onMounted } from "vue";
import { SysDictionary } from "../columns/data";
import { requestSysDictionaryCreate } from "@/api/modules/sysDictionary";
import { dtoSysDictionaryCreate } from "@/api/dbdto/dtoSysDictionary";
import { ResultData } from "@/api/interface";
import { RespOk } from "@/constant/codes";
import { ElMessage } from "element-plus";
import FormKV from "@/components/Form/formKV.vue";
import {
  DicValueTypeEntity,
  DicValueTypeOptions,
  DicValueTypeSqlSearch,
  DicValueTypeSqlSelect,
  DicValueTypeString
} from "@/constant/enums/dic_type";
import { DicDataTypeNumber, DicDataTypeString } from "@/constant/enums/dic_data_type";
import FormSeleteSearch from "@/components/Form/formSeleteSearch.vue";

let refFormKV = ref(); //动态键值对的ref
let formData = ref<dtoSysDictionaryCreate>({
  dic_key: "",
  dic_value: "",
  description: "",
  is_active: true,
  value_data_type: DicDataTypeString,
  dic_sort: 10,
  dic_value_type: DicValueTypeOptions
});

let formEntity = ref({
  father_table_name: "",
  son_table_name: "",
  son_relation_field: "" //子表中的关联字段
});

const handleClick = (value: any) => {
  console.log(value);
};

let emits = defineEmits(["reload"]);

//提交按钮点击事件
const submitData = () => {
  //构造字典值
  switch (formData.value.dic_value_type) {
    case DicValueTypeEntity: //一对多实体
      formData.value.dic_value = JSON.stringify(formEntity.value);
      break;
    case DicValueTypeOptions: //多对多实体
      formData.value.dic_value = refFormKV.value.GetJson();
      break;
  }
  if (formData.value.dic_key == "") {
    ElMessage({ type: "error", message: "字典key未填写" });
    return;
  }
  requestSysDictionaryCreate(formData.value).then((res: ResultData<any>) => {
    if (res.code == RespOk) {
      ElMessage({ type: "success", message: "创建成功" });
      isShow.value = false;
      emits("reload");
    }
  });
};

//以下是弹窗控制相关api
let isShow = ref(false);
const ShowPop = () => {
  isShow.value = true;
  nextTick(() => {
    //fApi.value.xxx  //这里操作fapi
  });
};
defineExpose({ ShowPop });
</script>

<style lang="scss" scoped>
.demo-form-inline .el-input {
  --el-input-width: 320px;
}
</style>
